<template>
    <div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import * as Cesium from 'cesium';
import { ACCESS_TOKEN } from '../../utils/constant';
Cesium.Ion.defaultAccessToken = ACCESS_TOKEN;
const initMap = () => {
    const viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,

        timeline: false
    });
    viewer.scene.globe.show = true;
    console.log(viewer);
    /**
     * 视角瞬间到达指定位置上y，前x,右z
     */
    // viewer.camera.setView({
    //     destination: Cesium.Cartesian3.fromDegrees(108.926593, 34.213389, 1500),
    //     orientation: {
    //         // 相机的朝向z
    //         heading: Cesium.Math.toRadians(90),
    //         // 俯仰角y
    //         pitch: Cesium.Math.toRadians(-45),
    //         // 滚动角x
    //         roll: 0
    //     }
    // });
    /**
     * 让相机飞向某个地方
     */
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(108.926593, 34.213389, 1500),
        orientation: {
            // 相机的朝向z
            heading: Cesium.Math.toRadians(90),
            // 俯仰角y
            pitch: Cesium.Math.toRadians(-45),
            // 滚动角x
            roll: 0
        }
    });
    // 事件控制相机
    document.addEventListener('keydown', (e: any) => {
        // 相机离地面的高度
        const height = viewer.camera.positionCartographic.height
        const moveRate = height / 100
        if (e.key === 'w') {
            viewer.camera.moveForward(moveRate);
        }else if(e.key === 's'){
            viewer.camera.moveBackward(moveRate)
        }else if(e.key === 'a'){
            viewer.camera.moveLeft(moveRate)
        }else if(e.key === 'd'){
            viewer.camera.moveRight(moveRate)
        }
    });
};
onMounted(() => {
    initMap();
});
</script>
<style lang="scss" scoped></style>
